<!DOCTYPE html>
<html>
<head>
    <title>Capacitor Diagram</title>
</head>
<body>
    <canvas id="capacitorCanvas" width="500" height="450" style="border:1px solid #d3d3d3;"></canvas>
    <script>
        const canvas = document.getElementById('capacitorCanvas');
        const ctx = canvas.getContext('2d');

        // Fill background with white
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Set drawing properties
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;
        
        // --- Helper function to draw a line ---
        function drawLine(x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
        }

        // 1. Draw the top T-shape (top plate and connection)
        ctx.setLineDash([]); // Ensure solid line
        // Horizontal part of the top T
        drawLine(150, 80, 350, 80);
        // Vertical part of the top T
        drawLine(250, 80, 250, 20);

        // 2. Draw the long solid horizontal line (initial liquid level)
        drawLine(50, 180, 450, 180);

        // 3. Draw the top two dashed lines
        ctx.setLineDash([15, 8]);
        // First dashed line
        drawLine(130, 215, 370, 215);
        // Second dashed line
        drawLine(130, 245, 370, 245);

        // 4. Draw the bottom dashed line (this will be intersected)
        // We draw it first so the solid vertical line can be drawn over it.
        drawLine(150, 315, 350, 315);
        
        // 5. Draw the bottom T-shape (bottom plate and connection)
        ctx.setLineDash([]); // Ensure solid line
        // Horizontal part of the bottom T
        drawLine(180, 280, 320, 280);
        // Vertical part of the bottom T (drawn over the dashed line)
        drawLine(250, 280, 250, 360);

    </script>
</body>
</html>